<template>
  <div style="width: 1000px; margin: 0 auto; line-height: 160px;">
    <!-- 评论展示区 -->
    <div style=" margin:20px 0 ;">
      <div
        style="margin: 10px 0; font-size: 24px;padding: 0px; border-bottom: 1px solid #ccc; height: 120px; text-align: center;">
        评论列表</div>
      <div style="margin: 20px 0; text-align: left;">
        <div style="padding:10px 0; line-height: 20px;" v-for="item in pageInfo.list">
          <div style="display: flex;">
            <div style="width: 80px; ">
              <el-avatar :size="50" :src="item.avatarUrl">
              </el-avatar>
            </div>
            <div style="flex: 1;">
              <div style="font-weight: bolder;">{{item.username}}</div>
<!-- 展示发表的图片 -->
              <!-- <div>{{item.imgUrl}}</div> -->
              <div class="demo-image__preview">
              <el-image v-if="item.imgUrl!=null"
              style="width: 100px; height: 100px"
              :src="item.imgUrl"
              :preview-src-list="srcList">
              </el-image>
</div>
              <div style="margin-top: 10px; color: #666;">{{item.content}}</div>
            </div>
          </div>
          <!-- 多级评论 -->
          <div style="text-align: right; padding: 10px;">
            <!-- 操作按钮，如果已经点赞过，显示取消点赞，否则显示点赞 -->
            <div>
              <!-- 删除按钮 -->
              <i class="el-icon-delete-solid" @click="deleteComment(item.cid)"></i>
              <el-button type="text" @click="clickOk(item.cid,)">
                <span v-if="pageInfo.ok">
                  <i class="el-icon-star-on"></i>
                  取消点赞{{item.likeNum}}
                </span>
                <span v-else>
                  <i class="el-icon-star-off"></i>
                  点赞{{item.likeNum}}
                </span>
              </el-button>
              <el-button type="text" @click="reply(item.cid,item.username)">回复你的好友吧</el-button>
            </div>
<!-- <img src="https://gulixueyuan001.oss-cn-beijing.aliyuncs.com/2022/11/29/345571f80cf7471488c0aa6d5d00d715v2-cf02dc2306749a4776858ff71df23fd3_r.jpg"/> -->
          </div>

          <!-- 子评论的展示 -->
          <div v-if="item.children"
            style="margin-left: 50px; background-color: aquamarine; padding: 10px; border-radius: 10px;">

            <div v-for="sub in item.children" :key="sub.id">
              <div style="padding: 10px 0;">

                <b @click="reply(sub.pid,sub.username)">{{sub.username}}</b><span>回复<span
                    style="color:blue">@{{sub.target}}:</span>
                  <span>{{sub.content}}</span></span>
                <i style="text-align: right;" class="el-icon-delete-solid" @click="deleteComment(sub.cid)"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="block" style="margin-top: 20px;margin-left: -200px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="this.pageInfo.total">
      </el-pagination>
    </div>

    <div class="block" style="margin: 20px 0 ;">
      <!-- 上传图片 -->
      <div style=" margin: 20px 0;">
        <el-upload class="avatar-uploader" action="http://localhost:8080/comment/getImageUrl" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

        <!-- 评论 -->
        <el-input type="textarea" v-model="comment.content" placeholder="请浅浅评论一下吧"></el-input>
        <div style="text-align: right; margin: -50px 0;">
          <el-button type="primary" @click="submit">发表</el-button>
        </div>
      </div>
    </div>
    <!-- 点击回复框出现的弹框 -->
    <el-dialog title="回复" :visible.sync="dialogFormVisible" style="line-height: 50px;">
      <el-form :model="replyComment">
        <el-form-item label="回复信息">
          <el-input v-model="replyComment.content" autocomplete="off" style="width: 80%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveReply">确 定</el-button>
      </div>
    </el-dialog>



  </div>

</template>


<script>

import badWordArray from "../badWord.js";

  export default {
    data() {
      return {
        srcList: [
                  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                  'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ],
        badWordArray: [],
        currentPage: 1,
        pageSize: 10,
        dialogImageUrl: '',
        pageInfo: {
          ok: false,
        },
        dialogVisible: false,
        file: null,
        dialogFormVisible: false,
        comment: {
          content: '',

        },
        replyComment: {
          content: ''
        },
        userinfo: {},
        headUrl: "",
        imageUrl:'',
      }
    },
    created() {
      this.user = JSON.parse(sessionStorage.getItem("user"))


      this.load()
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.comment.imgUrl=res.data
        this.imageUrl=res.data
        // this.comment.imageUrl = res.data
        console.log("1---" + this.comment.imageUrl)
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!');
        }
        return isJPG && isLt2M;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.load();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.load();
        console.log(`当前页: ${val}`);
      },
      // 删除评论，包括子评论
      deleteComment(cid) {
        // console.log(cid)
        this.$axios.delete("http://localhost:8080/comment/" + cid).then(res => {
          this.$notify.success("删除成功")
          this.load();
        })

      },
      // 点赞功能+1 --0代表点赞加一，1表示点赞减一
      clickOk(cid) {
        if (this.pageInfo.ok = true) {
          this.pageInfo.ok = false;
          this.$axios.put("http://localhost:8080/comment/1/" + cid).then(res => {
            this.$notify.success("取消点赞成功")
            this.load();
          })
        } else if (this.pageInfo.ok = false) {
          this.$axios.put("http://localhost:8080/comment/0/" + cid).then(res => {
            this.$notify.success("点赞成功")
            this.pageInfo.ok = true;
            this.load();
          })
        }


      },

      // 回复
      reply(pid, target) {
        this.replyComment = {
          pid: pid,
          username: this.user.username,
          target: target,
        }
        this.dialogFormVisible = true;
      },

      // 遍历所有的评论
      load() {
        this.$axios.get("http://localhost:8080/comment/" + this.currentPage + "/" + this.pageSize).then(res => {
          this.pageInfo = res.data.data;
          this.currentPage = this.pageInfo.pageNum;
          this.pageSize = this.pageInfo.pageSize;
          this.srcList=this.pageInfo.imgUrl;
        })

      },
      // 回复评论
      saveReply() {
        this.$axios({
          method: "post",
          url: "http://localhost:8080/comment",
          data: JSON.stringify(this.replyComment),
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(res => {
          this.$notify.success("成功")
          this.load();
          this.replyComment.content = '';
        })
        this.dialogFormVisible = false;
      },


      // 添加一条评论
      submit() {
        // 过滤不雅词汇
        this.badWordArray = badWordArray.badWordArray;
        var re = '';
        for (var i = 0; i < badWordArray.length; i++) {
          if (i == badWordArray.length - 1)
            re += badWordArray[i];
          else
            re += badWordArray[i] + "|";
        }
        var pattern = new RegExp(re, "gi");
        this.comment.content = this.comment.content.replace(pattern, "***")

        // 获取当前登录的姓名
        this.comment.username = this.user.username
        console.log("2---" + this.comment.imgUrl)
        this.$axios({
          method: "post",
          url: "http://localhost:8080/comment",
          data: JSON.stringify(this.comment),
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(res => {
          console.log(this.comment)
          this.$notify.success("成功")
          this.load();
          this.comment.content = '';
          this.comment.imageUrl='';
        }),
        this.imageUrl=''

      }
    }
  }
</script>



<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
